<template>
	<view>

		<view class="con_position">
			<view class="status_bar">

			</view>
			<view class="con_icon">
				<u-icon class="icon" name="arrow-left" size="40" @click="Back"></u-icon>
				<u-icon name="bell" size="60" style="margin-left: 540rpx;margin-top: 10rpx;" @click="newFriends"></u-icon>
			</view>
			<view class="con_group">
				<view class="group_text">
					<text>群聊</text>
					<text>志趣相同的人才会欣赏同一片风景</text>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="con_top">
				好友列表:
			</view>
		</view>
		<view style="margin-top: 445rpx;"> 
			<view class="wrap">
				<view class="demo-warter" v-for="(item, index) in flowList" :key="index">
					<view class="demo">
						<u-avatar :src="$url + item.icon" mode="square" size="large"></u-avatar>
						<view class="demo-text">
							<text>
								{{item.nickname}}
							</text>
							<text>ID号:{{item.uuId}}</text>
						</view>
						<view class="demo-bt" @click="sendUser(item.id,item)">
							发消息 
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import wsRequest from "@/util/websocket.js"
	export default {
		data() {
			return {
				form: {
					keyword: '',
					page: 0,
					limit: 9,
					uuId : '',
				},
				url:"",
				users: [],
				flowList: [],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		onLoad() {
			this.url=this.$url;
			this.apiData();
		},
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				icon.hide(); 
			}, 100);
		},
		beforeDestroy() {

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		
		onReachBottom() {
			// 模拟数据加载
			setTimeout(() => {
				this.apiData();
			}, 1000)
		},

		methods: {
			addRandomData() {
				for (let i = 0; i < this.users.length; i++) {
					let item = this.users[i]
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			Back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			newFriends(){
				uni.navigateTo({
					url: "/pages/userCate/addFriends/newFriends"
				})
			}, 
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			searchBank() {
				this.form.page = 0;
				this.flowList.length = 0;
				if (this.form.keyword != null && !this.form.keyword.length == 0) {
					this.apiData()
				}
			},
			apiData(){
				this.form.page = this.form.page+1;
				this.form.uuId = uni.getStorageSync('uuId');
				this.$sendRequest({
					url: "/friends/list",
					method: 'GET',
					data:this.form, 
					success: (res) => {
						this.users = res.data.records
						if(this.users != null){
							this.addRandomData(); 
						}
					}
				})
			},
			sendUser(id, item) {
				console.log(JSON.stringify(item)+"---------------");
				uni.navigateTo({
					url: "/pages/userCate/userComm/privateChat?user="+encodeURIComponent(JSON.stringify(item)),
				})
			},
		},

	}
</script>

<style>
	.con_position {
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 440rpx;
		background-color: #f2f3f7;
		top: 0;
	}
	.con_icon{
		display: flex;
		flex-direction: row;
	}
	.con_group{
		margin: 40rpx auto;
		padding: 20rpx;
		width: 85%;
		height: 130rpx;
		display: flex;
		flex-direction: row;
		border-radius: 15px;
		background-color: #4b5ad9;
		color: #ffffff;
	}
	.group_text{
		display: flex;
		flex-direction: column;
		font-family: my-font;
		margin-right: 160rpx;
	}
	.con_group text:nth-child(1){
		font-size: 40rpx;
	}
	.con_top {
		padding-left: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		width: 100%;
		height: 100rpx;
		font-size: 35rpx;
		font-family: my-font;
		color: #4b5ad9;
	}

	.icon {
		margin: 20rpx;
		background-color: #fffffd;
		width: 80rpx;
		height: 80rpx;
		padding: 20rpx;
		border-radius: 100rpx;
		box-shadow: 1px 2px 3px 3px rgba(235, 234, 246, 0.9);
	}

	.wrap {
		margin: 0 auto;
		width: 90%;
		height: 1300rpx;
	}
</style>
<style lang="scss" scoped>
	.demo-warter {
		width: 96%;
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
	}

	.demo {
		padding: 15rpx;
		width: 100%;
		height: 148rpx;
		display: flex;
		flex-direction: row;
		border-radius: 15px;
		background-color: #f2f3f7;
	}

	.u-avatar {
		margin-right: 10rpx;
	}

	.demo-text {
		width: 65%;
		display: flex;
		flex-direction: column;
	}

	.demo-text text:nth-child(1) {
		width: 360rpx;
		overflow: hidden;
		white-space: nowarp;
		text-overflow: ellipsis;
		font-size: 32rpx;
	}

	.demo-text text:nth-child(2) {
		color: #9A9A9A;
		margin-top: 25rpx;
		font-size: 30rpx;
	}

	.demo-bt {
		margin: auto 0;
		padding-top: 8rpx;
		color: #4b5ad9;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8px;
		background-color: #ffffff;
		box-shadow: 1px 2px 3px 3px rgba(235, 234, 246, 0.9);
	}
</style>
